import React from 'react'
import {Avatar, Breadcrumb, Dropdown, Layout, Menu, message, theme , Badge} from 'antd';
import logo from './img.png'
import {adminRoutes} from "../../routes";
import {useLocation, useNavigate} from 'react-router-dom';
import {DownOutlined} from '@ant-design/icons';
import './Index.css'
import {removeToken} from "../../utils/auth";
import {useSelector} from "react-redux";

function Index({children}) {
    const {Header, Content, Sider} = Layout;
    const navigate = useNavigate();
    const location = useLocation();

    // 从 Redux store 中获取通知状态
    const notices = useSelector(state => state.notifications.notifications);
    // 计算未读通知数量
    const unreadCount = notices.filter(notice => !notice.isRead).length;



    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();


    const siderMenuItems = adminRoutes.filter(route => route.isShow).map((route, index) => {

        return {
            key: route.path, // 我点击对应的标签应该得切换路径才对
            label: route.title || route.path, icon: route.icon ? React.createElement(route.icon) : null

        }
    })

    // 处理菜单点击事件
    const handleMenuClick = ({key}) => {
        // 导航到对应的路径
        navigate(`/admin/${key}`);
    };

    // 获取当前选中的菜单项
    const getCurrentMenuKey = () => {
        const path = location.pathname.replace('/admin/', '');
        return path || 'dashboard';
    };
    // 处理用户菜单点击事件
    const handleUserMenuClick = ({key})=>{
        console.log('用户菜单点击，key:', key);
        switch (key){
            case 'notification':
                message.info('跳转到通知中心');
                navigate('../admin/notices');
                break;
            case 'setting':
                message.info('跳转到设置页面');
                // navigate('/admin/setting');
                break;
            case 'logOut':
                message.success('正在退出登录...');
                // 退出登录的逻辑
                handleLogout()
                break;
            default:
                break;
        }
    }
    // 处理退出登录
    const handleLogout = ()=>{
        //1.清除登录信息
        removeToken()
        //2.跳转到登录页面
        navigate('/login');
        //3.显示退出成功消息
        setTimeout(() => {
            message.success('退出登录成功');
        }, 100);

    }
    // 下拉菜单项配置
    const popMenu = {
        items: [{key: 'notification', label: '通知中心'},
            {key: 'setting', label: '设置'},
            {key: 'logOut', label: '退出'}],
        onClick: handleUserMenuClick
    };

    return (<Layout>
        <Header className="header">
            <div className="demo-logo">
                <img src={logo} alt="logo"
                     style={{maxHeight: '64px', width: 'auto', verticalAlign: 'middle'}}
                />
            </div>
            <div className="user-dropdown">
                <Avatar style={{marginRight: 8}}>U</Avatar>
                <Dropdown menu={popMenu}>
                    <a href='#' onClick={(e) => e.preventDefault()}>
                        <Badge count={unreadCount} overflowCount={99}><span>超级管理员</span></Badge>
                        <DownOutlined style={{marginLeft: 8}}/>
                    </a>
                </Dropdown>

            </div>


        </Header>
        <Layout>
            <Sider width={200} style={{background: colorBgContainer}}>
                <Menu
                    mode="inline"
                    selectedKeys={[getCurrentMenuKey()]}
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{height: '100%', borderInlineEnd: 0}}
                    items={siderMenuItems}
                    onClick={handleMenuClick}
                />
            </Sider>
            <Layout style={{padding: '16px'}}>
                <Breadcrumb
                    items={[{title: 'Home'}, {title: 'List'}, {title: 'App'}]}
                    style={{margin: '16px 0'}}
                />
                <Content
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    {children}
                </Content>
            </Layout>
        </Layout>
    </Layout>)
}

export default Index
